<template>
  <div class="page_root" data-page-name="123" data-page-identification="v_urqqbfhjqc">
    <a-spin :spinning="false">
      <!-- begin vid_v8x4g42oqx 自定义模板_vuywrehb87 -->
      <a-card style="margin-bottom: 20px; border-radius: 5px" :bodyStyle="contractState.bodyStyle">
        <div class="content-title">
          <a-row>
            <a-col :span="22">信息筛选</a-col>
            <a-col :span="2" style="display: flex; justify-content: space-around">
              <a-button class="btn-top">查询</a-button>
              <a-button class="btn-top">重置</a-button>
            </a-col>
          </a-row>
        </div>
        <a-form :label-col="{ span: 7 }">
          <a-row>
            <a-col :span="6">
              <a-form-item label="合同类型">
                <a-select v-model:value="contractState.searchForm.contractType" showArrow placeholder="请选择" allowClear
                  mode="multiple" :options="[
                    { label: '国网', value: 0 },
                    { label: '省网', value: 1 },
                    { label: '临时', value: 2 },
                    { label: '零售', value: 3 }
                  ]" />
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item label="合同标识">
                <a-select v-model:value="contractState.searchForm.contractIdentifier" showArrow placeholder="请选择"
                  allowClear mode="multiple" :options="[
                    { label: '框架合同', value: 0 },
                    { label: '常规合同', value: 1 }
                  ]" />
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item label="客户类型">
                <a-select v-model:value="contractState.searchForm.customerType" showArrow placeholder="请选择" allowClear
                  mode="multiple" :options="[
                    { label: '国网', value: 0 },
                    { label: '省网', value: 1 },
                    { label: '零售', value: 2 }
                  ]" />
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item label="项目名称">
                <a-select v-model:value="contractState.searchForm.customerType" showArrow placeholder="请选择" allowClear
                  mode="multiple" showSearch :options="contractState.projectNameList"
                  :field-names="{ label: 'projectName', value: 'projectName' }" :filter-option="(input, option) => {
                      return option.projectName.toLowerCase().indexOf(input.toLowerCase()) >= 0
                    }
                    " />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="6">
              <a-form-item label="客户单位">
                <a-select v-model:value="contractState.searchForm.customerUnit" showArrow placeholder="请选择" allowClear
                  mode="multiple" :options="contractState.customerUnitList"
                  :field-names="{ label: 'customerUnit', value: 'customerUnit' }" :filter-option="(input, option) => {
                      return option.customerUnit.toLowerCase().indexOf(input.toLowerCase()) >= 0
                    }
                    " />
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item label="省份">
                <a-select v-model:value="contractState.searchForm.province" showArrow placeholder="请选择" allowClear
                  mode="multiple" :options="contractState.provinceList"
                  :field-names="{ label: 'province', value: 'province' }" :filter-option="(input, option) => {
                      return option.province.toLowerCase().indexOf(input.toLowerCase()) >= 0
                    }
                    " />
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item label="销售人员">
                <a-select v-model:value="contractState.searchForm.salePerson" showArrow placeholder="请选择" allowClear
                  mode="multiple" :options="contractState.salePersonList"
                  :field-names="{ label: 'salePerson', value: 'salePerson' }" :filter-option="(input, option) => {
                      return option.salePerson.toLowerCase().indexOf(input.toLowerCase()) >= 0
                    }
                    " />
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item label="合同执行状态">
                <a-select v-model:value="contractState.searchForm.contractExecutionStatus" showArrow placeholder="请选择"
                  allowClear mode="multiple" :options="[
                    { label: '中标', value: 0 },
                    { label: '下达销售计划', value: 1 },
                    { label: '发货', value: 2 },
                    { label: '关账', value: 3 },
                    { label: '未发货', value: 4 },
                    { label: '已未回款', value: 5 },
                    { label: '已开票未发货', value: 6 },
                    { label: '预开票', value: 7 },
                    { label: '预回款', value: 8 },
                    { label: '未关账', value: 9 }
                  ]" />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="6">
              <a-form-item label="交期时间">
                <a-range-picker v-model:value="contractState.searchForm.leadTime" :format="'YYYY-MM-DD'"
                  :disabledDate="disabledDate" :valueFormat="'YYYY-MM-DD'" />
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item label="合同建立时间">
                <a-range-picker v-model:value="contractState.searchForm.createdTime" :format="'YYYY-MM-DD'"
                  :disabledDate="disabledDate" :valueFormat="'YYYY-MM-DD'" />
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item label="下达销售计划时间">
                <a-range-picker v-model:value="contractState.searchForm.salesPlanIssueTime" :format="'YYYY-MM-DD'"
                  :disabledDate="disabledDate" :valueFormat="'YYYY-MM-DD'" />
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item label="送货时间">
                <a-range-picker v-model:value="contractState.searchForm.deliveryTime" :format="'YYYY-MM-DD'"
                  :disabledDate="disabledDate" :valueFormat="'YYYY-MM-DD'" />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="6">
              <a-form-item label="回款时间">
                <a-range-picker v-model:value="contractState.searchForm.leadTime" :format="'YYYY-MM-DD'"
                  :disabledDate="disabledDate" :valueFormat="'YYYY-MM-DD'" />
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item label="合同履约比率">
                <a-select v-model:value="contractState.searchForm.productPerformanceRatio" showArrow placeholder="请选择"
                  allowClear mode="multiple" :options="[
                    { label: '金额：1%-10%', value: 0 },
                    { label: '金额：10%-20%', value: 1 },
                    { label: '金额：20%-30%', value: 2 },
                    { label: '发货数量：1%-10%', value: 3 }
                  ]" />
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item label="开票比率">
                <a-select v-model:value="contractState.searchForm.paymentRatio" showArrow placeholder="请选择" allowClear
                  mode="multiple" :options="[
                    { label: '1%-10%', value: 0 },
                    { label: '10%-20%', value: 1 },
                    { label: '20%-30%', value: 2 },
                    { label: '30%-40%', value: 3 },
                    { label: '40%-50%', value: 4 },
                    { label: '50%-60%', value: 5 },
                    { label: '60%-70%', value: 6 },
                    { label: '70%-80%', value: 7 },
                    { label: '80%-90%', value: 8 },
                    { label: '90%-100%', value: 9 }
                  ]" />
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item label="回款比率">
                <a-select v-model:value="contractState.searchForm.invoiceRatio" showArrow placeholder="请选择" allowClear
                  mode="multiple" :options="[
                    { label: '1%-10%', value: 0 },
                    { label: '10%-20%', value: 1 },
                    { label: '20%-30%', value: 2 },
                    { label: '30%-40%', value: 3 },
                    { label: '40%-50%', value: 4 },
                    { label: '50%-60%', value: 5 },
                    { label: '60%-70%', value: 6 },
                    { label: '70%-80%', value: 7 },
                    { label: '80%-90%', value: 8 },
                    { label: '90%-100%', value: 9 }
                  ]" />
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </a-card>
      <!-- 表格部分 -->
      <a-card style="border-radius: 5px">
        <div class="content-title">
          <a-row>
            <a-col :span="20">合同列表</a-col>
            <a-col :span="4" style="display: flex; justify-content: space-around">
              <a-button class="btn-top" @click="handlePreInvoicing">预开票</a-button>
              <a-button class="btn-top">回款</a-button>
              <a-button class="btn-top">统计</a-button>
            </a-col>
          </a-row>
        </div>
        <a-table :dataSource="contractState.contractData" :columns="contractState.contractColumns" bordered
          :expandedRowKeys="contractState.expandedKeys" :scroll="{ x: 'max-content' }" @expand="handleExpand"
          :row-selection="contractState.rowSelection" :pagination="pagination">
          <template #bodyCell="{ column, record, text }">
            <template v-if="column.dataIndex === 'contractNumber'">
              <span v-if="text" style="color: #3875ff; cursor: pointer" @click="handleCycleMonitoring">{{
                text
              }}</span>
              <span v-else>--</span>
            </template>
            <template v-if="column.dataIndex === 'contractType'">
              <span v-if="text === 0">国网</span>
              <span v-else-if="text === 1">省网</span>
              <span v-else-if="text === 2">临时</span>
              <span v-else-if="text === 3">零售</span>
            </template>
            <template v-if="column.dataIndex === 'action'">
              <a-button type="link" @click="handleDetail">详情</a-button>
              <a-divider type="vertical" />
              <a-button type="link" @click="handleRecord">记录</a-button>
              <a-divider type="vertical" />
              <a-button :disabled="!record.children" @click="toggleExpand(record)" type="link">{{
                isExpanded(record) ? '折叠' : '展开'
              }}</a-button>
            </template>
          </template>
        </a-table>
      </a-card>

      <!-- 周期监控弹窗 -->
      <a-modal v-model:visible="contractState.cycleMonitoringVisible" title="合同生命周期监控" width="1000px">
        <div class="cycle-monitoring"></div>
      </a-modal>
      <!-- 周期监控弹窗 -->
      <!-- 预开票弹窗 -->
      <a-modal v-model:visible="contractState.invoicingVisible" @ok="handleSubmitInvoicing" title="预开票" width="1000px">
        <a-table :dataSource="contractState.invoicingData" :columns="contractState.invoicingColumn"
          :scroll="{ x: 'max-content' }">
          <template #bodyCell="{ column, record, text }">
            <template v-if="column.dataIndex === 'collectionStage'">
              <a-select style="width: 120px" v-model:value="record.collectionStage" showArrow placeholder="请选择" allowClear
                :options="[
                  { label: '预付款', value: 0 },
                  { label: '到货款', value: 1 },
                  { label: '投运款', value: 2 },
                  { label: '质保金', value: 3 },
                  { label: '无计划还款', value: 4 }
                ]" />
            </template>
          </template>
        </a-table>
      </a-modal>
      <!-- 预开票弹窗 -->
      <!-- 详情弹窗 -->
      <a-modal title="详情" v-model:visible="contractState.detailVisible" width="1000px" class="detail-modal">
        <div class="detail-title"> 基础信息</div>
        <table>
          <tr>
            <th>联接组别</th>
            <td></td>
            <th>电压组合</th>
            <td></td>
            <th>协议号</th>
            <td></td>
            <th>工程账号</th>
            <td></td>
          </tr>
          <tr>
            <th>产品来源</th>
            <td></td>
            <th>常规名称</th>
            <td></td>
            <th>产品容量</th>
            <td></td>
            <th>产品类别</th>
            <td></td>
          </tr>
          <tr>
            <th>登记时间</th>
            <td></td>
            <th>质保期限</th>
            <td></td>
            <th>质量标准</th>
            <td></td>
            <th>运输方式</th>
            <td></td>
          </tr>
          <tr>
            <th>运输费用</th>
            <td></td>
            <th>预付款</th>
            <td></td>
            <th></th>
            <td></td>
            <th></th>
            <td></td>
          </tr>
        </table>
        <div class="detail-title"> 合同设备清单</div>
        <a-table bordered :columns="contractState.detailColumns" :dataSource="contractState.detailDataSource"
          :scroll="{ x: 800 }" />
        <div class="detail-note">
          <a-textarea rows="4" v-model:value="contractState.detailNote" placeholder="请输入" allow-clear />
        </div>
      </a-modal>
      <!-- 详情弹窗 -->
      <!-- 记录弹窗 -->
      <a-modal v-model:visible="contractState.recordVisible" width="1000px">
        <a-tabs v-model:activeKey="contractState.activeKey">
          <a-tab-pane key="1" tab="预开票记录">
            {{ contractState.editableData }}
            {{ contractState.preInvoicingDataSource }}
            <a-table :columns="contractState.preInvoicingColumn" :dataSource="contractState.preInvoicingDataSource">
              <template #bodyCell="{ column, text, record, index }">
                <!-- "['name', 'age', 'address'].includes(column.dataIndex)" -->
                <template v-if="['money', 'number', 'hk'].includes(column.dataIndex)">
                  <div>
                    <a-input v-if="contractState.editableData[record.key]"
                      v-model:value="contractState.editableData[record.key][column.dataIndex]" style="margin: -5px 0" />
                    <template v-else>
                      {{ text }}
                    </template>
                  </div>
                </template>
                <template v-else-if="['yes'].includes(column.dataIndex)">
                  <div>
                    <a-select v-if="contractState.editableData[record.key]"
                      v-model:value="contractState.editableData[record.key][column.dataIndex]" style="margin: -5px 0"
                      :options="[
                        { label: '是', value: '是' },
                        { label: '否', value: '否' }
                      ]" />
                    <template v-else>
                      {{ text }}
                    </template>
                  </div>
                </template>
                <template v-else-if="column.dataIndex === 'actions'">
                  <div class="editable-row-operations">
                    <span v-if="contractState.editableData[record.key]">
                      <a-typography-link style="margin-right: 5px"
                        @click="preInvoicingSave(record.key)">保存</a-typography-link>
                      <a-popconfirm title="确定取消？" @confirm="preInvoicingCancel(record.key)">
                        <a>取消</a>
                      </a-popconfirm>
                    </span>
                    <span v-else>
                      <a @click="preInvoicingEdit(record.key)" style="margin-right: 5px">编辑</a>
                      <a @click="preInvoicingDelete(index)">删除</a>
                    </span>
                  </div>
                </template>
              </template>
            </a-table>
          </a-tab-pane>
          <a-tab-pane key="2" tab="回款记录" force-render>Content of Tab Pane 2</a-tab-pane>
          <a-tab-pane key="3" tab="发货记录">Content of Tab Pane 3</a-tab-pane>
        </a-tabs>
      </a-modal>
      <!-- 记录弹窗 -->
      <!-- end vid_v8x4g42oqx 自定义模板_vuywrehb87 -->
    </a-spin>
  </div>
</template>
<script setup>
import {
  h,
  ref,
  reactive,
  toRaw,
  markRaw,
  watch,
  computed,
  onBeforeMount,
  onMounted,
  onBeforeUnmount,
  onUnmounted,
  onActivated,
  onDeactivated
} from 'vue'
import { useRoute, useRouter } from 'vue-router'
const router = useRouter()
const route = useRoute()
import { get, post, put, del, request, requestWithHeaders } from '@/utils/http/Axios'
import {
  cloneDeep,
  isNullOrEmpty,
  isEmptyArr,
  isNullOrUnDef,
  localGet,
  isContained,
  isArray,
  isEmpty,
  merge,
  getDifferenceArray,
  isObject,
  traversalTreeStructure,
  checkCaseCondition,
  renderStringInTemplate,
  handleBreadcrumbJump,
  throttle
} from '@/utils/index'
import dayjs from 'dayjs'
import { getPagePcChartsDataSourceConvert } from '@/utils/chart'
import { propertyFormatByNumber, propertyFormatByPercentage, propertyFormatByDate } from '@/utils/format'

import { message, notification, Modal } from 'ant-design-vue'
// 获取传入的流程ID
const immediateWatch = (source, callback) => {
  watch(source, callback, { deep: true, immediate: true })
}

// ---------------------------- 页面参数 ----------------------------
const contractState = reactive({
  bodyStyle: { paddingBottom: 0 },
  // 项目名称列表
  projectNameList: [],
  // 客户单位列表
  customerUnitList: [],
  // 省份列表
  provinceList: [],
  // 搜索表单
  searchForm: {
    // 合同类型
    contractType: [],
    // 合同标识
    contractIdentifier: [],
    // 客户类型
    customerType: [],
    // 客户单位
    customerUnit: [],
    // 省份
    province: [],
    // 销售人员
    salePerson: [],
    // 合同执行状态
    contractExecutionStatus: [],
    // 交期时间
    leadTime: [],
    // 合同建立时间
    createdTime: [],
    // 下达时间
    salesPlanIssueTime: [],
    // 送货时间
    deliveryTime: [],
    // 合同履约比率
    productPerformanceRatio: [],
    // 开票比率
    paymentRatio: [],
    // 回款比率
    invoiceRatio: []
  },
  // 合同列表展开的行
  expandedKeys: [],
  // 合同列表表格数据
  contractData: [
    {
      key: 13,
      contractNumber: '12345678910111213139',
      contractType: 0,
      children: [
        { key: 666, contractNumber: 'Node1-1', contractType: 1 },
        { key: 777, contractNumber: 'Node1-2', contractType: 2 }
      ]
    },
    {
      key: 12,
      contractNumber: null,
      contractType: 3,
      children: [
        { key: 888, contractNumber: 'Node2-1' },
        { key: 999, contractNumber: 'Node2-2' }
      ]
    },
    {
      key: 112,
      contractNumber: 'Node2',
      children: [
        { key: 8188, contractNumber: 'Node2-1' },
        { key: 9199, contractNumber: 'Node2-2' }
      ]
    }
  ],
  // 合同列表表头
  contractColumns: [
    {
      title: '合同/订单编号',
      width: '220px',
      align: 'center',
      dataIndex: 'contractNumber',
      ellipsis: true,
      fixed: 'left',
      customRender: text => {
        return text ? text : '--'
      }
    },
    { title: '合同类型', align: 'center', dataIndex: 'contractType' },
    { title: '合同标识', align: 'center', dataIndex: 'contractIdentifier' },
    { title: '客户单位', align: 'center', dataIndex: 'customerUnit', ellipsis: true, width: '150px' },
    { title: '客户类型', align: 'center', dataIndex: 'customerType' },
    { title: '省份', align: 'center', dataIndex: 'province' },
    { title: '订单数', align: 'center', dataIndex: 'orderCount' },
    { title: '中标金额', align: 'center', dataIndex: 'winningAmount' },
    { title: '金额履约比率', align: 'center', dataIndex: 'amountPerformanceRatio' },
    { title: '产品履约比率', align: 'center', dataIndex: 'productPerformanceRatio' },
    { title: '发货比率', align: 'center', dataIndex: 'deliveryRatio' },
    { title: '发货量', align: 'center', dataIndex: 'deliveryQuantity' },
    { title: '回款金额', align: 'center', dataIndex: '' },
    { title: '回款比率', align: 'center', dataIndex: '' },
    { title: '开票金额', align: 'center', dataIndex: '' },
    { title: '开票比率', align: 'center', dataIndex: '' },
    { title: '销售人员', align: 'center', dataIndex: 'salePerson' },
    { title: '合同执行状态', align: 'center', dataIndex: 'contractExecutionStatus' },
    { title: '交期时间', align: 'center', dataIndex: 'leadTime' },
    { title: '下单间隔时间', align: 'center', dataIndex: 'orderIntervalTime' },
    { title: '签订时间', align: 'center', dataIndex: '' },
    {
      title: '操作',
      width: '250px',
      align: 'center',
      dataIndex: 'action',
      fixed: 'right'
    }
  ],
  // 合同列表选中属性
  rowSelection: {
    type: 'checkbox',
    checkStrictly: false,
    selectedRowKeys: [],
    onChange: selectedRowKeys => {
      // 更新已选择的行
      contractState.rowSelection.selectedRowKeys = selectedRowKeys
    },
    onSelectAll: (selected, selectedRows, changeRows) => {
      console.log(selected, selectedRows, changeRows)
    }
  },
  // 预开票表格数据
  invoicingData: [{ id: '1', collectionStage: '' }],
  // 预开票表头
  invoicingColumn: [
    {
      title: '合同/订单编号',
      width: '220px',
      align: 'center',
      dataIndex: 'contractNumber',
      ellipsis: true,
      fixed: 'left'
    },
    { title: '客户单位', align: 'center', dataIndex: 'customerUnit', ellipsis: true, width: '150px' },
    { title: '已开票金额', align: 'center', dataIndex: 'customerUnit', ellipsis: true },
    { title: '未开票金额', align: 'center', dataIndex: 'customerUnit', ellipsis: true },
    { title: '开票比率', align: 'center', dataIndex: 'customerUnit', ellipsis: true },
    { title: '回款阶段', align: 'center', dataIndex: 'collectionStage', ellipsis: true, width: '150px' },
    { title: '发票号码', align: 'center', dataIndex: 'customerUnit', ellipsis: true, width: '150px' },
    { title: '预开票金额', align: 'center', dataIndex: 'customerUnit', ellipsis: true, width: '150px' }
  ],
  // 详情表头
  detailColumns: [
    {
      title: '货物名称',
      dataIndex: '',
      align: 'center',
      ellipsis: true
    },
    {
      title: '货物描述',
      dataIndex: '',
      align: 'center',
      ellipsis: true
    },
    {
      title: '单价（含税）(人民币价格)',
      dataIndex: '',
      align: 'center',
      ellipsis: true
    },
    {
      title: '单价（不含税）(人民币价格)',
      dataIndex: '',
      align: 'center',
      ellipsis: true
    },
    {
      title: '单位',
      dataIndex: '',
      align: 'center',
      ellipsis: true
    },
    {
      title: '数量',
      dataIndex: '',
      align: 'center',
      ellipsis: true
    },
    {
      title: '合同价款（含税）（人民币元）',
      dataIndex: '',
      align: 'center',
      ellipsis: true
    },
    {
      title: '合同价款（不含税）（人民币元）',
      dataIndex: '',
      align: 'center',
      ellipsis: true
    },
    {
      title: '税率',
      dataIndex: '',
      align: 'center',
      ellipsis: true
    },
    {
      title: '交货地点',
      dataIndex: '',
      align: 'center',
      ellipsis: true
    },
    {
      title: '交货方式',
      dataIndex: '',
      align: 'center',
      ellipsis: true
    }
  ],
  // 详情表格数据
  detailDataSource: [],
  // 合同周期监控弹窗
  cycleMonitoringVisible: false,
  // 预开票弹窗
  invoicingVisible: false,
  // 详情弹窗
  detailVisible: false,
  // 详情备注
  detailNote: '',
  // 记录弹窗
  recordVisible: false,
  // 记录tab
  activeKey: '1',
  // 记录-预开票记录表头
  preInvoicingColumn: [
    { title: '开票金额', dataIndex: 'money', align: 'center' },
    { title: '发票号码', dataIndex: 'number', align: 'center', ellipsis: true },
    { title: '回款阶段', dataIndex: 'hk', align: 'center', ellipsis: true },
    { title: '是否允许对应回款', dataIndex: 'yes', align: 'center', ellipsis: true },
    { title: '操作时间', dataIndex: 'time', align: 'center', ellipsis: true },
    { title: '操作人员', dataIndex: 'people', align: 'center', ellipsis: true },
    { title: '操作', dataIndex: 'actions', align: 'center', ellipsis: true }
  ],
  // 记录-预开票表格数据
  preInvoicingDataSource: [
    { key: '1', money: 100, number: 190, hk: '正在回款', yes: '否', time: '2023-06-10', people: '冯腾飞' }
    // { key: '2', money: 200, number: 890,  hk:'正在回款',yes: '是', time: '2023-06-10', people: '冯腾飞' },
    // { key: '3', money: 300, number: 8290, hk:'正在回款', yes: '是', time: '2023-06-10', people: '冯腾飞' },
    // { key: '4', money: 200, number: 810,  hk:'正在回款',yes: '是', time: '2023-06-10', people: '冯腾飞' },
    // { key: '5', money: 300, number: 890, hk:'正在回款', yes: '是', time: '2023-06-10', people: '冯腾飞' },
    // { key: '6', money: 500, number: 890, hk:'正在回款', yes: '是', time: '2023-06-10', people: '冯腾飞' },
    // { key: '7', money: 600, number: 190, hk:'正在回款', yes: '是', time: '2023-06-10', people: '冯腾飞' },
    // { key: '8', money: 700, number: 490, hk:'正在回款', yes: '是', time: '2023-06-10', people: '冯腾飞' },
    // { key: '9', money: 100, number: 690, hk:'正在回款', yes: '是', time: '2023-06-10', people: '冯腾飞' },
  ],
  // 记录-编辑预开票的数据
  editableData: [],
  // 记录-回款记录表头
  collectionRecordsColumn: [],
  // 记录-回款记录数据
  collectionRecordsDataSource: [],
  // 记录-发货记录表头
  shippingRecordColumn: [],
  // 记录-发货记录表格数据
  shippingRecordDataSource: []
})
// 分页方法
const pageSizeChange = (current, size) => {
  pagination.value.current = current
  pagination.value.pageSize = size
  getContractTableData()
}
const pageChange = (page, pageSize) => {
  pagination.value.current = page
  pagination.value.pageSize = pageSize
  getContractTableData()
}
// 分页信息
const pagination = ref({
  current: 1,
  pageSize: 10,
  showSizeChanger: true,
  total: '0',
  pageSizeOptions: ['5', '10', '20', '30', '40', '100'],
  showTotal: total => `共 ${total} 条数据`,
  onShowSizeChange: pageSizeChange,
  onChange: pageChange
})

// ============================ 页面参数 ============================

// ---------------------------- 组件事件处理方法 ----------------------------
// 获取项目名称
function getProjectNameList() { }
//获取省份
function getProvinceList() { }
// 获取销售人员
function getSalePersonList() { }
// 不可选的时间
function disabledDate(date) {
  const startDate = dayjs('2000-01-01')
  const endDate = dayjs() // 当前日期
  // 禁用早于开始时间和晚于结束时间的日期
  return date.isBefore(startDate) || date.isAfter(endDate)
}
// 获取合同列表数据
const getContractTableData = () => {
  const params = {
    pageNo: pagination.value.current,
    pageSize: pagination.value.pageSize,
    contractCode: '111'
  }
  post('/solution-wb/api/v1/constract/page_list', params).then(data => {
    console.log(data, 'data')
  })
}

// 合同列表展开方法
const handleExpand = (expanded, record) => {
  if (expanded) {
    contractState.expandedKeys.push(record.key)
  } else {
    const index = contractState.expandedKeys.indexOf(record.key)
    if (index > -1) {
      contractState.expandedKeys.splice(index, 1)
    }
  }
}
// 合同列表展开方法
const toggleExpand = record => {
  const index = contractState.expandedKeys.indexOf(record.key)
  if (index > -1) {
    contractState.expandedKeys.splice(index, 1)
  } else {
    contractState.expandedKeys.push(record.key)
  }
}
// 合同列表展开方法
const isExpanded = record => {
  return contractState.expandedKeys.includes(record.key)
}
// 点击合同比编号弹出合同周期监控
const handleCycleMonitoring = () => {
  contractState.cycleMonitoringVisible = true
}
// 预开票按钮事件
const handlePreInvoicing = () => {
  contractState.invoicingVisible = true
}
// 详情按钮
const handleDetail = () => {
  contractState.detailVisible = true
}
// 记录按钮
const handleRecord = () => {
  contractState.recordVisible = true
}
// 记录-表格编辑
const preInvoicingEdit = key => {
  contractState.editableData[key] = cloneDeep(
    contractState.preInvoicingDataSource.filter(item => key === item.key)[0]
  )
}
// 记录-表格保存
const preInvoicingSave = key => {
  Object.assign(
    contractState.preInvoicingDataSource.filter(item => key === item.key)[0],
    contractState.editableData[key]
  )
  delete contractState.editableData[key]
}
// 记录-表格取消保存
const preInvoicingCancel = key => {
  delete contractState.editableData[key]
}
// 记录-表格删除
const preInvoicingDelete = index => {
  contractState.preInvoicingDataSource.splice(index, 1)
}
// ============================ 组件事件处理方法 ============================

// ============================ 方法 ============================

// ---------------------------- 生命周期 ----------------------------
onMounted(() => {
  getContractTableData()
})

onUnmounted(() => {
  // 销毁定时器
  setTimeOutList.forEach(({ repeat, timer }) => {
    repeat ? clearInterval(timer) : clearTimeout(timer)
  })
})

    // ============================ 生命周期 ============================

    // ---------------------------- 数据关联处理 ----------------------------

    // ---------------------------- 表单数据同步 ----------------------------

    // ============================ 表单数据同步 ============================

    // ---------------------------- 组件数据同步 ----------------------------

    // ============================ 组件数据同步 ============================

    // ============================ 数据关联处理 ============================

    // ---------------------- 不同组件自定义的处理逻辑 ---------------------

    // ====================== 不同组件自定义的处理逻辑 ======================

    // ================================定制化逻辑========================================
</script>
<style lang="less" scoped>
.page_root {
  width: 100%;
  height: 100%;
  overflow: auto;
}

.page_root :deep(.@{ant-prefix}-spin-nested-loading),
.page_root :deep(.@{ant-prefix}-spin-container) {
  height: 100%;
}

.table-moreBtn_down {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 100px;
}

.table-moreBtn_menu :deep(.table-moreBtn_menu-item):hover {
  background: #ebf1ff;
}

/* 穿梭框改变默认样式，为根据组件样式控制左右栏宽度。 */
:deep(.@{ant-prefix}-transfer-list) {
  height: 100%;
  width: 50%;
}

.content-title {
  position: relative;
  font-size: 16px;
  font-weight: 800;
  left: 10px;
  margin-bottom: 20px;
}

.content-title:before {
  position: absolute;
  content: '';
  background-color: #3875ff;
  width: 4px;
  height: 16px;
  position: absolute;
  left: -10px;
  top: 60%;
  margin-top: -14px;
}

.detail-title {
  position: relative;
  font-size: 16px;
  font-weight: 800;
  left: 10px;
  margin-bottom: 20px;
}

.detail-title:before {
  position: absolute;
  content: '';
  background-color: #3875ff;
  width: 4px;
  height: 16px;
  position: absolute;
  left: -10px;
  top: 75%;
  margin-top: -14px;
}

.btn-top {
  color: #3875ff;
  border-color: #3875ff;
}

/deep/.ant3-table-row-indent+.ant3-table-row-expand-icon {
  display: none;
}

.cycle-monitoring {
  width: 952px;
  height: 452px;
  background: url('@/assets/back.png');
}

table {
  border-collapse: collapse;
  width: 950px;
  height: 150px;
  margin-bottom: 20px;
}

th {
  width: 125px;
}

th:nth-child(-n + 14) {
  background-color: #efefef;
}

th,
td {
  border: 1px solid #404040;
  padding: 8px;
}

/deep/ .ant3-form-item-control-input {
  width: 292px;
}

.detail-note {
  margin-top: 20px;
}

// /deep/.detail-note > .ant3-table-thead>tr>th,
// /deep/.ant3-table-thead>tr>th,
// /deep/.aps-table-thead>tr>th {
//   background-color: #EFEFEF;
// }
</style>
